<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
</head>
<body>
<div id="chat">
    <ul id="messages"></ul>
    <input id="messageInput" type="text" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
</div>

<script>
    // const ws = new WebSocket('ws://ac8lix.qdboc.com:9501');
    const ws = new WebSocket("ws://47.104.141.153:9501");

    ws.onopen = function() {
        console.log('Connected to the chat server');
        ws.send('Hello World');
    };

    ws.onmessage = function(event) {
        // console.log('Received message: ' + event.data);
        console.log(event.data);
        const message = event.data;
        // const message = JSON.parse(event.data);
        const messages = document.getElementById('messages');
        const li = document.createElement('li');
        li.textContent = `User ${message.user}: ${message.message}`;
        messages.appendChild(li);
    };

    function sendMessage() {
        const input = document.getElementById('messageInput');
        const message = input.value;
        // console.log(message);
        ws.send(JSON.stringify({type:'message', message: message }));

        input.value = '';
        console.log("消息已经发送：", message);
    }
</script>
</body>
</html>